<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>

		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/jiazai.css" />
		<link rel="stylesheet" type="text/css" href="css/index2.css" />

	</head>

	<body style="background: #fff;">
		<div id="app">
			<!-- 加载中动画 -->
			<div id='jiazai-ani' v-if='jiazai'>
				<div class="arc"></div>
				<h1><span>LOADING</span></h1>
			</div>
			<!-- 加载中动画 -->
			<div class="fixed-hea">
				<div class="dis-cen hea-con">
					<div class="dis-cen hea-btn-wrap">
						<span @tap="toggleDapp('adpp')" :class="{'btn-active':type=='adpp'}">DAPP</span>
						<span @tap="toggleDapp('find')" :class="{'btn-active':type=='find'}">发现</span>
					</div>
				</div>
			</div>
			<div class="sc-content-adpp" v-if="type=='adpp'">
				<div>
					<div class="adpp-fixed">
						<div class='balan-img'>
							<div id="slider" class="mui-slider">
								<div class="mui-slider-group mui-slider-loop" id='my-slider'>
									<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
									<div class="mui-slider-item mui-slider-item-duplicate">
										<a href="#">
											<img src="img/dapp-img.png">
										</a>
									</div>
									<!-- 第一张 -->
									<div class="mui-slider-item">
										<a href="#">
											<img src="img/dapp-img.png">
										</a>
									</div>
									<!-- 第二张 -->
									<div class="mui-slider-item">
										<a href="#">
											<img src="img/dapp-img.png">
										</a>
									</div>
									<!-- 第三张 -->
									<div class="mui-slider-item">
										<a href="#">
											<img src="img/dapp-img.png">
										</a>
									</div>
									<!-- 第四张 -->
									<div class="mui-slider-item">
										<a href="#">
											<img src="img/dapp-img.png">
										</a>
									</div>
									<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
									<div class="mui-slider-item mui-slider-item-duplicate">
										<a href="#">
											<img src="img/dapp-img.png">
										</a>
									</div>
								</div>
								<div class="mui-slider-indicator">
									<div class="mui-indicator mui-active"></div>
									<div class="mui-indicator"></div>
									<div class="mui-indicator"></div>
									<div class="mui-indicator"></div>
								</div>
							</div>
						</div>
						<div class="dis-spa chan-coins">
							<span class='coins-active'>最新</span>
							<span>最热</span>
							<span>浏览器</span>
							<span>游戏</span>
						</div>
					</div>
					<div class="adpp-sc">
						<div class="dis-spa adpp-list" v-for="(val,index) in 10" :key='index'>
							<img class='adpp-logo' src="img/eth.png" />
							<div class="adpp-info" style="overflow: hidden;">
								<div class="dis-spa adpp-tit-wrap">
									<div>
										<h1>楚留香</h1>
										<p>游戏</p>
									</div>
									<button>开始</button>
								</div>
								<p>上岛咖啡时间考虑对法</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="sc-content-find" v-if="type=='find'">
				<div>
					<div class="dis-cen find-fixed">
						<span :class="{'find-ch-active':noType=='zi'}" @tap="noType='zi'">咨讯</span>
						<span :class="{'find-ch-active':noType=='qu'}" @tap="noType='qu'">快讯</span>
					</div>
					<div class="find-sc">
						<div v-if="noType=='zi'">
							<div class="dis-spa art-list" v-for="(val,index) in 10" :key='index'>
								<div class='art-info'>
									<p>圣诞乐房价啊科技时代士乐房价啊科技时代士乐房价啊科技时代士乐房价啊科技时代士大夫艰苦啦</p>
									<p>火星 2019-01-04 16:29</p>
								</div>
								<img src="img/artic.png" style="width: 100px;height: 80px;" />
							</div>
						</div>
						<div v-if="noType=='qu'">
							<div class="qu-list" v-for="(val,index) in 10" :key='index'>
								<div class="qu-content">
									<h2>这是标题</h2>
									<p class='ellip-overflow'>
										<span>k来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发来点实际开发速度加快立法金卡楼上的发</span>
									</p>
								</div>
								<div class="dis-spa qu-dir">
									<p>
										<span>币世界</span>&nbsp;&nbsp;
										<span>2018-01-01</span>
									</p>
									<p @tap="arInfo(val)">查看详情</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			var app = new Vue({
				el: '#app',
				data: {
					jiazai: false,
					//adpp:adpp   find:发现  
					type: 'find',
					//咨询/快讯  zi:咨询   qu:快讯
					noType: 'qu'
				},
				methods: {
					//切换adpp / 发现
					toggleDapp:function(tit){
						_openJiazai();
						this.type=tit;
						if(tit=='adpp'){
							//adpp
							this.$nextTick(function(){
								mui('.mui-slider').slider({});
								_closeJiazai();
							});
						}else{
							//发现
							_closeJiazai();
						}
					},
					//去快讯文章详情
					arInfo:function(val){
						var web=_indexOpenHref({
							url:'qu-info.html',
							id:'quInfo'
						});
						
					}
				}
			});
			mui.init({
				pullRefresh: {
					container: '#app',
					down: {
						style: 'circle',
						callback: function() {
							mui('#app').pullRefresh().endPulldown();
						}
					},
					up: {
						//						auto: true,
						//						contentrefresh: '正在加载...',
						//						callback: pullupRefresh
					}
				}
			});

			var gallery = mui('.mui-slider');

			var first = null;
			mui.back = function() {
				//首次按键，提示‘再按一次退出应用’
				if(!first) {
					first = new Date().getTime();
					plus.nativeUI.toast("再按一次退出程序");
					setTimeout(function() {
						first = null;
					}, 1000);
				} else {
					if(new Date().getTime() - first < 1000) {
						plus.runtime.quit();
					}
				}
			};
		</script>
	</body>

</html>